<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:gdmt="">
    <div th:replace="common/common::html"></div>

    <div id="add-menu-info-dialog-id" style="display: none">
        <form id="add-menu-info-form-id" th:action="@{/menu/addMenuInfoById}"
              method="post">
            <div class="form-group">
                <span for="add-menu-name-id" th:text="#{menu.name}"></span>
                <input name="menuName" id="add-menu-name-id" class="form-control" regex="^.{1,50}$" tip="input 1 to 50 char">
            </div>
            <div class="form-group">
                <span for="add-menu-type-id" th:text="#{menu.type}"> </span>
                <select gdmt:dicselect="menu.type" class="form-control" id="add-menu-type-id" name="menuType" regex="^\d$" tip="please choose"></select>
            </div>
            <div class="form-group">
                <span for="add-menu-type-id" th:text="#{menu.level}"> </span>
                <select gdmt:dicselect="menu.level" class="form-control" id="add-menu-level-id" name="menuLevel" regex="^\d$" tip="please choose"></select>
            </div>
            <div class="form-group">
                <span for="add-menu-url-id">URL</span>
                <input name="menuUrl" id="add-menu-url-id" class="form-control" regex="^([a-z,A-Z]([a-z,A-Z,0-9]|_)*(/[a-z,A-Z]([a-z,A-Z,0-9]|_)*)*)?$" tip="please input url">
            </div>
            <div class="form-group">
                <span for="add-menu-privilege-code-id" th:text="#{menu.privilege.code}"> </span>
                <input name="privilegeCode" id="add-menu-privilege-code-id" class="form-control" regex="^\w*$" tip="please input char 、number、_ ">
            </div>
            <div class="form-group">
                <span for="add-menu-icon-id" th:text="#{menu.menu.icon}"></span>
                <input name="menuIcon" id="add-menu-icon-id" class="form-control" regex="^.+$" tip="please input icon class ">
            </div>
            <div class="form-group">
                <span for="add-menu-http-id" th:text="#{menu.menu.http}"> </span>
                <select gdmt:dicselect="menu.https" class="form-control" id="add-menu-http-id" name="isHttps" regex="^\d$" tip="please choose"></select>
            </div>
        </form>
    </div>


    <title th:text="#{menu.info.tip}"></title>


    <script th:inline="javascript" >




    var leftMenuSetting = {
    check: {
    enable: false
    },
    data: {
    simpleData: {
    enable: true
    }
    },
    callback : {
    onClick : onClickNode
    }
    };


    function leftMenuLoad() {
    $.ajax({
    type: 'post',
    async: false,
    dataType : 'json',
    url: /*[[@{/menu/getMenuTree}]]*/'',
    data: [],
    success: function (data) {
    $.fn.zTree.init($("#menu-left-tree-ul-id"), leftMenuSetting, data);
    },
    error: function(msg){
    message(/*[[#{common.error}]]*/'');
    }
    }
    );
    }
    function onClickNode(event, treeId, treeNode){

    }


    $(function() {
    leftMenuLoad();
    });//ready







    function onClickNode(event, treeId, treeNode){
    //console.info(treeNode.id);
    $.ajax({
    type: 'post',
    async: false,
    dataType : 'json',
    url: /*[[@{/menu/getMenuInfoById}]]*/'',
    data: [{name:"menuId",value:treeNode.id}],
    success: function (data) {
    var dom = $("#modify-menu-info-form-id .form-control");
    dom.each(function(index,item) {
    var nameAttr = $(item).attr("name");
    // console.info(data[nameAttr]);
    $(item).val(data[nameAttr]);
    });

    },
    error: function(msg){
    message(/*[[#{common.error}]]*/'');
    }
    }
    );
    }

    function modifyMenuInfo() {
        var flag = true;
        var dom = $("#modify-menu-info-form-id > div > .form-control");
        dom.each(function(index,item) {
            flag &= $(item).verification();
            console.info(flag);
        });
        if(!flag){
            return;
        }
        $("#modify-menu-info-form-id").submit();
    }

    function addMenuInfo() {
        $("#add-menu-info-form-id").resetForm();
        $("#add-menu-info-dialog-id").dialog('open');
    }

    $("#modify-menu-info-form-id").ajaxForm({
        dataType: "json",
        success : function(data) {
            message(data.msg);
            leftMenuLoad();
        },
        error : function() {
            message(/*[[#{common.error}]]*/'');
        },
        complete : function(response, status) {

        }
    });

    $("#add-menu-info-form-id").ajaxForm({
        dataType: "json",
        success : function(data) {
            message(data.msg);
            leftMenuLoad();
            $("#add-menu-info-dialog-id").dialog('close');
        },
        error : function() {
            message(/*[[#{common.error}]]*/'');
        },
        complete : function(response, status) {

        }

    });

    $("#add-menu-info-dialog-id").dialog({
        autoOpen : false,
        width : 400,
        modal : true,
        resizable : false,
        title: /*[[#{menu.add}]]*/'',
        buttons: [
            {
                text: /*[[#{common.confirm}]]*/'',
                click: function() {
                    var flag = true;
                    var dom = $("#add-menu-info-form-id > div > .form-control");
                    dom.each(function(index,item) {
                        flag &= $(item).verification();
                        console.info(flag);
                    });
                    if(!flag){
                        return;
                    }
                    $("#add-menu-info-form-id").submit();
                }
            },
            {
                text: /*[[#{common.cancel}]]*/'',
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });

    </script>

    <nav>
        <span th:text="#{menu.info.tip}"></span>
        <ul id="menu-left-tree-ul-id" class="ztree" ></ul>
    </nav>

    <article style="flex-grow: 1">
        <form id="modify-menu-info-form-id" th:action="@{/menu/modifyMenuInfoById}"
              method="post">
            <fieldset >
                <legend>
                    <span th:text="#{common.base}"></span>
                </legend>
                <div class="form-tow-column">
                    <div class="form-group">
                        <span for="mod-menu-id" th:text="#{menu.id}"> </span>
                        <input name="menuId" id="mod-menu-id" class="form-control" readonly >
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-name-id" th:text="#{menu.name}"></span>
                        <input name="menuName" id="mod-menu-name-id" class="form-control" regex="^.{1,50}$" tip="input 1 to 50 char">
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-type-id" th:text="#{menu.type}"> </span>
                        <select gdmt:dicselect="menu.type" class="form-control" id="mod-menu-type-id" name="menuType" regex="^\d$" tip="please choose"></select>
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-type-id" th:text="#{menu.level}"></span>
                        <select gdmt:dicselect="menu.level" class="form-control" id="mod-menu-level-id" name="menuLevel"></select>
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-url-id">URL</span>
                        <input name="menuUrl" id="mod-menu-url-id" class="form-control">
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-privilege-code-id" th:text="#{menu.privilege.code}"> </span>
                        <input name="privilegeCode" id="mod-menu-privilege-code-id" class="form-control">
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-icon-id" th:text="#{menu.menu.icon}"></span>
                        <input name="menuIcon" id="mod-menu-icon-id" class="form-control">
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-http-id" th:text="#{menu.menu.http}"> </span>
                        <select gdmt:dicselect="menu.https" class="form-control" id="mod-menu-http-id" name="isHttps" value="0"></select>
                    </div>
                </div>
            </fieldset>
        </form>
    </article>

    <a href="#" class="btn" onclick="modifyMenuInfo();">
        <i class="glyphicon glyphicon-modal-window"></i>
        <span th:text="#{common.modify}"></span>
    </a>

    <a href="#" class="btn" onclick="addMenuInfo();">
        <i class="fa fa-plus"></i>
        <span th:text="#{common.add}"> </span>
    </a>


